<template>
  <div class="add-to-cart">
    <div class="left">
      <div class="left-top">
        <span class="context">单注：</span>
        <div class="input-wrapper">
          <unit-price-setter></unit-price-setter>
          <total-amount-setter></total-amount-setter>
        </div>
        <unit-setter></unit-setter>
        <refund-rate-switch></refund-rate-switch>
      </div>
      <div class="left-bottom">
        <span class="context">
          共选
        </span>
        <input 
          class="buying-quantity" 
          type="button" 
          :value="getBuyingQuantity"
        />
        <!-- <span>100</span> -->
        <span>注</span>
        <span class="context">
          金额
        </span>
        <span class="total-amount">
          {{getTotalAmount}}
        </span>
        <div 
          class="clear hover-style" 
          @click="clearSelectionState"
          >
          清空
        </div>
      </div>
    </div>
    <div class="right">
      <div 
        :disabled="getBuyingQuantity == 0"
        class="btn add-number hover-style"
        :class="getBuyingQuantity > 0 ? 'button-unselected' : ''"
        @click="handleAddNumber"
      >
       添加号码
      </div>
      <div 
        class="btn add-number hover-style" 
        :class="getBuyingQuantity > 0 ? 'button-selected' : ''"
        @click="handleBuyNow"
        >
        立即投注
      </div>
    </div>
  </div>
</template>

<script>
import RefundRateSwitch from '@/components/base/refund-rate-switch/refund-rate-switch'
import UnitSetter from '@/components/base/unit-setter/unit-setter'
import UnitPriceSetter from '@/components/base/price-setter/unit-price-setter'
import TotalAmountSetter from '@/components/base/price-setter/total-amount-setter'

import { addLotteryToCartMixin } from '@/assets/js/mixin.js'
import { mapMutations, mapGetters, mapActions } from 'vuex'
const HIGHT_RATE = 0.025
const LOW_RATE = 0
export default {
  mixins: [addLotteryToCartMixin],
  components: {
    RefundRateSwitch,
    UnitSetter,
    UnitPriceSetter,
    TotalAmountSetter,
  },
  props: {
    lotteryCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // switch的状态
      on: false,
      // 金额单位
      unit: [
        { 
          id: 1,
          context: '元',
          rate: 1
        },
        { 
          id: 2,
          context: '角',
          rate: 0.1
        },
        { 
          id: 3,
          context: '分',
          rate: 0.01
        },
        { 
          id: 4,
          context: '里',
          rate: 0.001
        }
      ],
      //按钮
      buttons: [
        {
          id: 1,
          btnName: '添加号码',
          type: 'add-number'
        },
        {
          id: 2,
          btnName: '立即投注',
          type: 'buy-directly'
        }
      ],
      // 默认高亮按钮
      activeIndex: 0,
      // 默认价格
      unitPrice: 2,
      // 显示筹码
      showChips: false 
    }
  },
  methods: {
    // 返点切换
    handleSwitch() {
      this.on = !this.on
      // 切换返点
      this.getRefundRate == LOW_RATE 
       ? this.setRefundRate(HIGHT_RATE) 
       : this.setRefundRate(LOW_RATE)
    },
    // 设置单价
    changePrice(e) {
      let value = Number(e.target.value.replace(/\D/g,''))
      this.unitPrice = value
      this.setUnitPrice(value) 
    },
    // 保存当前单位
    chooseUnit(rate) {
      this.setUnitRate(rate)
    },
    handleAddNumber() {
      if (this.getBuyingQuantity > 0) {
         this.addLotteryToCart()
      }
    },
    handleBuyNow() {
      if (this.getBuyingQuantity > 0) {
        this.clearSelectionState()
      }
    },
    unfoldChips() {
      this.showChips = true 
    },
    foldChips() {
      this.showChips = false 
    }
  },
  
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .add-to-cart >>> .unit 
    height 26px !important 
    .unit-item 
      width 26px !important 
      line-height 26px !important 
  .add-to-cart
    width 100%
    height 97px
    display flex
    border-top 1px solid $color-divide-line 
    border-bottom 1px solid $color-divide-line 
    background $color-text-button
    .left
      display flex
      flex-direction column
      justify-content space-between
      height 97px
      // width 600px
      .left-top
        margin-top 15px
        margin-left 20px
        display flex
        align-items center
        .input-wrapper 
          position: relative 
          .chips 
            position absolute 
            background #fff 
            left 50%
            top -140px 
            transform translateX(-50%)
          .price
            outline-style: none 
            width 60px
            height 26px
            line-height 30px
            text-align center
            border-radius 3px
        .refund
          margin-left 10px
          display flex 
          align-items center
          .low  
            &.active
              color $color-theme-red
          .high 
            &.active
              color $color-theme-red
          .unknown-num 
            margin-left 10px
          .switch
            width 35px
            height 16px
            margin 0 10px
            border-radius 4px
            vertical-align top
            position relative
            box-sizing border-box
            cursor pointer
            .switch-control
              position absolute
              left 0.2px
              top 0px
              right 0.2px
              width 15px
              height 14px
              border-radius 4px
              background #fff
              box-sizing border-box
              cursor pointer 
              &.on
                transition all .1s ease
              &.off
                transform translateX(18px)
                transition all .1s ease
      .left-bottom
        display flex
        margin-left 20px
        margin-bottom 15px
        align-items center
        .buying-quantity
          min-width 30px
          height 20px
          width auto
          outline-style none
          text-align center
          background: none
          margin-right 10px
        .context 
          margin-right 10px
        .clear
          display flex 
          align-items center
          justify-content center
          margin-left 10px
          width 50px
          height 20px
          border-radius 3px
          color $color-theme-red
          border 1px solid $color-theme-red
    .right 
      height 96px
      flex 1
      margin-right 20px
      font-size 0
      display flex
      align-items center
      justify-content flex-end
      .btn
        width 105px
        line-height 60px
        height 60px
        font-weight 700
        font-size 15px
        border-radius 3px
        border 1px solid $color-divide-line 
        text-align center 
        color #cccdd0
        box-shadow 0 3px 6px #ccc
        &.add-number
          margin-right 10px
        
</style>
